<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 2em;
			padding: 5px 0;
		}
		svg	{
			transform: rotate(-90deg);
		}
		.F_Position circle{
			transition: stroke-dasharray 1s;
			fill: pink;
			fill-opacity:0.1;
			stroke-linecap: ;
			stroke:skyblue;
			stroke-width:3px; 
			stroke-dasharray: 330px;
		}
		#txt{
			position: absolute;
			top: 30%;
			left: 30%;
			transform: translate(50%,50%,0);
			font-size: 30px;
		}
	</style>
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" :href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="circle">circle展示</h4>
				<div class="F_Position">
					<svg viewbox="0 0 200 200" width='200' height='200'>
						<circle cx="100" cy="100" r="50"  />
					</svg>
					<span id="txt">
						0%
					</span>
				</div>
				<pre>
		svg	{
			/*相对坐标在三点钟方向,需要偏移90度到12点方向*/
			transform: rotate(-90deg);
		}
		circle{
			transition: stroke-dasharray 1s;
			/*stroke-dasharray: 137px 0;*/
			fill: pink;
			/*填充透明度*/
			fill-opacity:0.1;
			/*描边形状*/
			stroke-linecap: ;
			/*描边颜色*/
			stroke:skyblue;
			/*描边边框宽度*/
			stroke-width:3px; 
			/*区分填色区域与非填色区域的长度*/
			stroke-dasharray: 330px;
			/*stroke-dashoffset: 0px;*/
		}
		span{
			position: absolute;
			top: 52%;
			left: 42%;
			transform: translate(50%,50%,0);
			font-size: 55px;
		}
			
		html
		&lt;svg viewbox="0 0 200 200"&gt;
			&lt;circle cx="100" cy="100" r="50"  /&gt;
		&lt;/svg&gt;
		&lt;span id="txt"&gt;
			0%
		&lt;/span&gt;
		
		js		
		var sum=0;
		var timer=null;
		var num=314;
		var circle=document.querySelector("circle");
		timer=setInterval(function(){
			sum+=1;
			txt.innerText=sum+"%";
			circle.style.strokeDashoffset=num*3.14+"px";
			num--;
			if(sum==100){
				clearInterval(timer);
			}
		},100)		
				</pre>
			</div>
			<div>
				<h4 id='attr'>circle属性</h4>
				<ul>
					<li>cx,cy：定义圆的坐标位置</li>
					<li>r：圆的半径</li>
					<li>fill：填充色</li>
					<li>stroke：描边色</li>
					<li>stroke-width：边框宽度</li>
				</ul>
			</div>
			<div>
				<h4 id="apply">多个圆运用展示</h4>
				<pre>
	&lt;svg xmlns="http://www.w3.org/2000/svg"
		 xmlns:xlink="http://www.w3.org/1999/xlink"
		 version="1.1" height="400" width="450"
		 baseProfile="full"&gt;
	  &lt;g fill-opacity="0.7" stroke="black" stroke-width="0.1cm"&gt;
		&lt;circle cx="6cm" cy="2cm" r="100" fill="red"
						transform="translate(0,50)" /&gt;
		&lt;circle cx="6cm" cy="2cm" r="100" fill="blue"
						transform="translate(100,100)" /&gt;
		&lt;circle cx="6cm" cy="2cm" r="100" fill="green"
						transform="translate(-10,150)" /&gt;
	  &lt;/g&gt;
	&lt;/svg&gt;				
				</pre>
				<svg xmlns="http://www.w3.org/2000/svg"
				     xmlns:xlink="http://www.w3.org/1999/xlink"
				     version="1.1" height="400" width="450"
				     baseProfile="full">
				  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
				    <circle cx="6cm" cy="2cm" r="100" fill="red"
				                    transform="translate(0,50)" />
				    <circle cx="6cm" cy="2cm" r="100" fill="blue"
				                    transform="translate(100,100)" />
				    <circle cx="6cm" cy="2cm" r="100" fill="green"
				                    transform="translate(-10,150)" />
				  </g>
				</svg>
			</div>
			<div>
				<h4 id="ellipse">ellipse 椭圆</h4>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <ellipse cx="100" cy="80" rx="20" ry="60"
				  style="fill:yellow;stroke:purple;stroke-width:2"/>
				</svg>
				<pre>
	&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
	  &lt;ellipse cx="100" cy="80" rx="20" ry="60"
	  style="fill:yellow;stroke:purple;stroke-width:2"/&gt;
	&lt;/svg&gt;				
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function() {
				return {
					list: [
						{ name: "circle展示",id: "circle",explain: ''},
						{ name: "circle属性",id: "attr",explain: 'circle常用属性'},
						{ name: "多个圆运用展示",id: "apply",explain: ''},
						{ name: "ellipse 椭圆",id: "ellipse",explain: ''},
					]
				}
			},
			mounted() {
				var sum=0;
				var timer=null;
				var num=314;
				var circle=document.querySelector("circle");
				timer=setInterval(function(){
					sum+=1;
					txt.innerText=sum+"%";
					circle.style.strokeDashoffset=num*3.14+"px";
					num--;
					if(sum==100){
						clearInterval(timer);
					}
				},100)
			}
		})
	</script>
</body>

</html>